import React, { Component } from 'react'
import { Carousel,NoticeBar } from 'antd-mobile';
import MyTopListView from '../../components/my_listview/my_top_listview'
import CarouselItem from '../../components/carousel_item/carousel_item'
import {connect} from 'react-redux'
import {queryAllTopNewsAsync} from '../../redux/actions'


class Home extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: ['banner0', 'banner1', 'banner2']
    }
  }

  componentDidMount(){
    this.props.queryAllTopNewsAsync()
  }

  render() {
    return (
      <div className="content_margin">
        <Carousel
          autoplay={false}
          autoplayInterval={5000}
          infinite
        >
          {this.state.data.map((val,index) => (
            <CarouselItem text={val} key={index}/>
          ))}
        </Carousel>
        <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
          通知:  1.勿忘火警 119,危险时刻真朋友 2.火灾不难防,重在守规章 3.消防设施别乱动,扑救火灾有大用
        </NoticeBar>
        <MyTopListView dataSource={this.props.dataSource}/>
      </div>

    );
  }
}

export default connect(
  state=>({dataSource:state.topNewsListData.datasource}),
  {queryAllTopNewsAsync})(Home)